<template>
  <div class="login">
    <div class="login_wrap">
      <h2 class="login_wrap_h2">Sign in to man`man</h2>
      <transition name="slide" mode="out-in">
        <el-form
          v-if="loginType"
          :model="loginForm"
          status-icon
          :rules="rules"
          ref="loginForm"
          class="login_wrap_form"
        >
          <el-form-item
            prop="username"
            label="Username or email address"
            class="login_wrap_form_label"
          >
            <el-input
              class="login_wrap_form_input"
              type="text"
              v-model="loginForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="Password"
            prop="password"
            class="login_wrap_form_label"
          >
            <el-input
              class="login_wrap_form_input"
              type="password"
              v-model="loginForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item class="login_wrap_form_label">
            <div slot="label">captcha</div>
            <br />
            <div class="login_wrap_form_captcha">
              <el-input
                class="login_wrap_form_input"
                type="text"
                v-model="loginForm.captcha"
                autocomplete="off"
                @keydown.native.enter="_submitForm('loginForm')"
              ></el-input>
              <span
                v-html="codeSvg"
                @click="_refresh"
                class="login_wrap_form_svg"
              >
              </span>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login_wrap_form_button"
              type="info"
              @click="_submitForm('loginForm')"
              >Sign in</el-button
            >
          </el-form-item>
        </el-form>
        <div v-else class="login_wrap_QRCode">
          <img src="~assets/img/login/QRCode.jpg" draggable="false" alt="" />
        </div>
      </transition>
      <div class="login_wrap_portrait"></div>
      <div
        class="login_wrap_switch iconfont"
        @click="_loginType"
        v-html="loginType_"
      ></div>
    </div>
  </div>
</template>

<script>
import { getCaptcha, login } from "api/interface";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("不能为空!"));
        // } else if (!/[A-Z|a-z|0-9|_]{5,11}$/.test(value)) {
        //   if (/^\w{2,20}@\w{2,5}\.[A-Z|a-z]{2,3}(\.cn|\.tw)?$/.test(value)) {
        //     callback();
        //   } else {
        //     callback(new Error("字母、数字、下划线,长度在5~11或者是邮箱格式"));
        //   }
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("不能为空!"));
        // } else if (!/^.*(?=.{6,})(?=.*\d)(?=.*[a-z]).*$/.test(value)) {
        //   callback(new Error("最少6位，包括至少1个小写字母，1个数字"));
      } else {
        callback();
      }
    };
    return {
      /* 表单绑定的双向数据 */
      loginForm: {
        username: "admin",
        password: "admin",
        captcha: "",
      },
      /* 验证表单字段的规则 */
      rules: {
        username: [{ validator: validatePass, trigger: "blur" }],
        password: [{ validator: validatePass2, trigger: "blur" }],
      },
      /* 登录的类型 */
      loginType: true,
      /* 验证码存放 */
      codeSvg: "",
    };
  },
  methods: {
    /* 点击登录触发的函数 */
    _submitForm(formName) {
      /* 验证规则 */
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          /* 加载提示 */
          const loading = this.$loading({
            lock: true,
            text: "验证中,请稍等",
            background: "rgba(0, 0, 0, 0.7)",
          });
          /* 获取表单字段 */
          const { username, password, captcha } = this.loginForm;
          /* 校验验证码 */
          // const {data} = await verifyCaptcha(captcha)
          const data = { state: true };
          /* 存放提示信息 */
          let message, type;
          if (!data.state) {
            message = "验证码错误";
            type = "error";
            this._refresh();
            this.loginForm.captcha = "";
          } else {
            /* 验证登录信息 */
            const result = await login(username, password);
            if (result.data.state) {
              /* 保存登录的用户信息 */
              this.$save.preserve("INFO", result.data.userInfo);
              this.$save.preserve("BUTTONS", result.data.permission.buttons);
              message = "验证成功";
              type = "success";
              /* 成功后跳转 */
              this.$save.preserve("TOKKU", result.data.token);
              /* 发送添加路由请求 */
              this.$store.dispatch("DIS_SIDE");
              /* 跳转到主页 */
              this.$router.push("/");
            } else {
              message = "用户名或密码错误";
              type = "error";
            }
          }
          /* 提示用户状态 */
          this.$message({ message, type });
          /* 关闭提示信息 */
          setTimeout(() => {
            loading.close();
          }, 100);
        } else {
          /*  */
          this.$message({
            type: "info",
            message: "'o(一︿一+)o'",
            center: true,
            duration: 800,
          });
          return false;
        }
      });
    },
    /* 切换登录方式的函数 */
    _loginType() {
      this.loginType = !this.loginType;
    },
    /* 获取验证码的函数 */
    async _refresh() {
      const result = await getCaptcha();
      this.codeSvg = result.data.img;
    },
  },
  computed: {
    /* 登录方式的图标 */
    loginType_(state) {
      return state.loginType ? "&#xe654;" : "&#xe81b;";
    },
  },
  mounted() {
    /* 首次获取 */
    this._refresh();
  },
};
</script>

<style scoped>
.login {
  background: url(~assets/img/login/bg.jpg) 0 / cover;
  height: 100%;
  position: relative;
}

.login_wrap {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 350px;
  height: 440px;
  /* background-image: linear-gradient(to right, #243949 0%, #517fa4 100%); */
  background-color: rgba(200, 200, 200, 0.3);
  border-radius: 8px;
  text-align: center;
}
.login_wrap_portrait {
  height: 100px;
  width: 100px;
  position: absolute;
  background: url(~assets/img/logo.png) 31% 10%/125% 150% no-repeat;
  top: -70px;
  left: -50px;
  border-radius: 50%;
}
.login_wrap_switch {
  height: 60px;
  width: 60px;
  position: absolute;
  right: 0;
  top: 0;
  font: 60px/60px "";
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 60% 100%, 0 40%);
  color: rgb(212, 210, 210);
  cursor: pointer;
  user-select: none;
}

.login_wrap_QRCode {
  width: 100%;
  height: 80%;
  overflow: hidden;
  margin-top: 30px;
  opacity: 0.9;
}

.login_wrap_QRCode img {
  width: 60%;
  height: 60%;
}
.login_wrap_h2 {
  font: 300 26px "";
  margin-top: 49px;
  color: rgb(219, 219, 219);
  letter-spacing: -0.5px;
}
.login_wrap_form {
  padding: 25px;
}
>>> .login_wrap_form_label {
  margin-bottom: 5px;
}
>>> .login_wrap_form_label label {
  font-size: 15px;
  color: rgb(189, 189, 189);
}
>>> .login_wrap_form_input input {
  height: 35px;
  border: 1px solid rgb(182, 182, 182);
  background-color: rgba(252, 254, 255, 0.877);
}
>>> .login_wrap_form_captcha {
  display: block;
  overflow: hidden;
  cursor: pointer;
}
>>> .login_wrap_form_captcha .login_wrap_form_input {
  float: left;
  width: 50%;
  display: block;
}

>>> .login_wrap_form_svg {
  width: 48%;
  float: left;
  height: 40px;
  background-color: rgba(252, 254, 255, 0.877);
  border-radius: 5px;
  margin-left: 1%;
}

>>> .login_wrap_form_svg svg {
  height: 100%;
  width: 100%;
}

.login_wrap_form_button {
  width: 100%;
  height: 35px;
  margin-top: 15px;
  /* background-color: #6894d3; */
  background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
}
/* 过渡切换 */
.slide-enter-active,
.slide-leave-active {
  transition: 0.4s;
}
.slide-enter,
.slide-leave-to {
  transform: translateX(60px);
  opacity: 0;
}
</style>
